<template>
    <!-- <div class="manage"> -->
    <div class="RegionManage">
        <AddRegionList :title="$t('text.Neighbourhoods.l31')" :iconTitle="$t('text.Neighbourhoods.l32')" :index="1"
            @returnData="setValue" @resent="resent" :dataList="list1" :setSelectName="setSelectName1">
        </AddRegionList>
        <AddRegionList :title="$t('text.Neighbourhoods.l33')" :iconTitle="$t('text.Neighbourhoods.l34')" :index="2"
            @returnData="setValue" @resent="resent" :dataList="list2" :dataList2="list1" :setSelectName="setSelectName2">
        </AddRegionList>
        <AddRegionList :title="$t('text.Neighbourhoods.l35')" :iconTitle="$t('text.Neighbourhoods.l36')" :index="3"
            @returnData="setValue" @resent="resent" :dataList="list3" :dataList2="list1" :dataList3="list2"
            :setSelectName="setSelectName3">
        </AddRegionList>

        <div class="adds">
            <div class="top">
                <div class="df">
                    <div style="padding-right: 10px;">{{ $t('text.Neighbourhoods.l37') }}</div>

                    <span class="df" @click="this.$router.push('/addNeighbourhoods')">
                        <img class="addImg" src="../../assets/images/add.svg">
                        <div style="font-size: 14px;white-space: nowrap;">{{ $t('text.Neighbourhoods.l38') }}</div>
                    </span>

                </div>

                <div class="f1" style="display: flex;justify-content: flex-end;">
                    <CommonSelectRouter :dataList="sort.data" :default="sort.default" ref="child1"
                        :myStyles="{ width: 'auto' }" @returnData="setSort" isShowSortImg>
                    </CommonSelectRouter>
                </div>
            </div>

            <div style="overflow: auto;">
                <div class="houseList" v-for="item in houseList" v-bind:key="item"
                    @click="this.$router.push({ path: '/neighbourhoodsDetail', query: { id: item.id } })">
                    <div style="position: relative;">
                        <CommonImage class="i1" :src="item.pictureAddress" />
                        <span v-if="item.picNum > 1" class="picNum">+{{ item.picNum }}</span>
                    </div>
                    <div class="item">
                        <div style="flex: 1;display: flex;flex-direction: column;align-items: baseline;">
                            <span style="padding-left: 5px;">{{ item.name }}</span>
                            <div class="address">
                                <img class="addImg" src="../../assets/images/address.svg">
                                <CommonOmit
                                    :text="item.address == '' || item.address == null ? $t('text.Neighbourhoods.l71') : item.address"
                                    :length="1"></CommonOmit>
                            </div>
                        </div>
                        <div class="itemRow">
                            <span>{{ item.avPrice == null ? '-' : item.avPrice + 'AED/m²' }}</span>
                            <div class="text1">
                                {{ $t('text.Neighbourhoods.l72') }}
                            </div>
                        </div>
                        <div class="itemRow">
                            <span>{{ item.buildingYears == null ? '-' : item.buildingYears +
                                $t('text.Neighbourhoods.l75') }}</span>
                            <div class="text1">
                                {{ $t('text.Neighbourhoods.l74') }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>

    </div>
    <div class="footer">
        <img class="hitImg" src="../../assets/images/hit.svg">
        <div class="hit">{{ $t('text.Neighbourhoods.l43') }}</div>
    </div>
    <!--底部分页-->
    <div class="setPage">
        <el-pagination v-model:current-page="searchData.pageNo" v-model:page-size="searchData.pageSize"
            :page-sizes="[10, 15, 20, 30, 50]" layout="total, sizes, prev, pager, next, jumper" :total="total"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
</template>
    
<script>
import { communityFindPage, getLevelAreaList } from '../../http/api'
export default {
    name: 'RegionManage',
    components: {
    },
    props: {
    },
    data() {
        return {
            sort: {
                default: this.$t("text.Neighbourhoods.l39"),
                data: [
                    { id: 1, name: this.$t("text.Neighbourhoods.l39") },
                    { id: 2, name: this.$t("text.Neighbourhoods.l40") },
                    { id: 3, name: this.$t("text.Neighbourhoods.l41") },
                    { id: 4, name: this.$t("text.Neighbourhoods.l42") },
                ]
            },
            houseList: [],
            list1: [],
            list2: [],
            list3: [],
            saveList: { list1: [], list2: [], list3: [] },
            searchData: {
                pageNo: 1,
                pageSize: 10,
                areaIds_LIKE_RIGHT: ''
            },
            total: 0,
            setSelectName1: '',
            setSelectName2: '',
            setSelectName3: '',
            ids: ["", "", "", ""]
        }
    },
    mounted() {
        this.search()
        getLevelAreaList({ level: 1 }).then(res => {
            if (res !== undefined) {
                this.list1 = res
                this.saveList.list1 = res
            }
        }).catch()
        getLevelAreaList({ level: 2 }).then(res => {
            if (res !== undefined) {
                this.list2 = res
                this.saveList.list2 = res
            }
        }).catch()
        getLevelAreaList({ level: 3 }).then(res => {
            if (res !== undefined) {
                this.list3 = res
                this.saveList.list3 = res
            }
        }).catch()

    },
    methods: {
        setSort(index) {
            this.$nextTick(() => {
                this.clearData({ avPrice_ORDER: '', buildingYears_ORDER: '' })
            })
            let obj
            switch (index) {
                case 1: obj = { avPrice_ORDER: "DESC" }; break;
                case 2: obj = { avPrice_ORDER: "ASC" }; break;
                case 3: obj = { buildingYears_ORDER: "DESC" }; break;
                case 4: obj = { buildingYears_ORDER: "ASC" }; break;
            }
            this.searchData = { ...this.searchData, ...obj }
            this.search()
        },

        setValue(index, item) {
            if (index === 1) {
                let tempList2 = this.saveList.list2.filter(v => v.parentId === item.id)
                this.list2 = tempList2
                let tempList3 = []
                tempList2.forEach(element => {
                    tempList3 = [...tempList3, ...this.saveList.list3.filter(v => v.parentId === element.id)]
                });
                this.list3 = tempList3
                this.ids[1] = item.id
            }
            if (index === 2) {
                let tempList = this.saveList.list3.filter(v => v.parentId === item.id)
                this.list3 = tempList
                let tempName = this.saveList.list1.filter(v => v.id === item.parentId)
                if (tempName.length > 0) {
                    this.setSelectName1 = tempName[0].areaName
                    this.ids[1] = tempName[0].id
                    this.ids[2] = item.id
                }
            }
            if (index == 3) {
                let tempName = this.saveList.list2.filter(v => v.id === item.parentId)
                if (tempName.length > 0) {
                    this.setSelectName2 = tempName[0].areaName
                    let tempName2 = this.saveList.list1.filter(v => v.id === tempName[0].parentId)
                    this.ids[2] = tempName[0].id
                    if (tempName2.length > 0) {
                        this.setSelectName1 = tempName2[0].areaName
                        this.ids[1] = tempName2[0].id
                    }
                    this.ids[3] = item.id
                }
            }
            this.searchData.areaIds_LIKE_RIGHT = item.id
            this.search()
        },

        resent(index) {
            if (index === 1) {
                this.list2 = this.saveList.list2
                this.list3 = this.saveList.list3
            }
            if (index === 2) {
                this.list3 = this.saveList.list3
            }
            this.searchData.areaIds_LIKE_RIGHT = this.ids[index - 1]
            this.search()
        },

        search() {
            communityFindPage(this.searchData).then(res => {
                if (res !== undefined) {
                    this.houseList = res.dataList
                    this.total = res.total
                }
            }).catch()
        },
        clearData(obj) {
            const objKeys = Object.keys(obj);
            this.searchData = Object.keys(this.searchData).reduce((acc, key) => {
                if (!objKeys.includes(key)) {
                    acc[key] = this.searchData[key];
                }
                return acc;
            }, {});
        },
        handleSizeChange(val) {
            this.searchData.pageSize = val
            this.search()
        },
        handleCurrentChange(val) {
            this.searchData.pageNo = val
            this.search()
        }
    },
    watch: {
    },
    computed: {
    }

}
</script>
    
<style scoped>
.itemRow {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: baseline;
    gap: 7px;
}

.address {
    font-size: 12px;
    padding-top: 5px;
    color: rgb(156, 151, 151);
    max-width: 250px;
    align-items: center;
    display: flex;
    padding-right: 20px;
}

.RegionManage {
    display: flex;
    width: 100%;
}

.footer {
    position: absolute;
    bottom: 20px;
    font-size: 13px;
    left: 255px;
    display: flex;
    align-items: center;
    color: #6c6b6b;
}

.hitImg {
    width: 15px;
    height: 15px;
}

.adds {
    flex: 1;
    border-right: 2px solid #ececec;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    margin-bottom: 50px;
}

.top {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
    margin: 0 20px;
    padding: 10px 0px;
}

.df {
    display: flex;
    align-items: center;
    margin-top: 2px;
    margin-bottom: 2px;
}

.addImg {
    width: 18px;
    height: 18px;
    padding-right: 3px;
}

.at {
    margin-left: 20px;
    overflow: auto;
    height: 100%;
}

.at1 {
    text-align: left;
    border-bottom: 1px solid #ddd;
    padding: 10px 0;
    font-size: 13px;
    margin-right: 20px;
}

.picNum {
    color: white;
    background: #535352;
    font-size: 12px;
    padding: 0 10px;
    border-radius: 10px;
    position: absolute;
    bottom: 3px;
    left: 55px;
    transform: scale(0.8);
}

.houseList {
    display: flex;
    align-items: center;
    height: 80px;
    padding-left: 20px;
}

.item {
    display: flex;
    align-items: baseline;
    width: 100%;
    height: 50px;
    border-bottom: 2px solid #eee;
    margin-left: 15px;
    margin-right: 50px;
    padding-top: 5px;
    font-size: 13px;
}

.addImg {
    width: 15px;
    height: 15px;
    margin-right: 3px;
}

.i1 {
    width: 90px;
    height: 60px;
}

span {
    white-space: nowrap;
    color: #6698ff;
}

.text1 {
    font-size: 12px;
    padding-top: 5px;
    color: rgb(156, 151, 151);
    word-break: keep-all;
    white-space: nowrap;
}

.setPage {
    position: absolute;
    bottom: 10px;
    right: 20px;
}</style>